{% extends 'base.html' %}
{% load staticfiles %}
{% block css %}
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="{% static 'plugins/datatable/css/dataTables.bootstrap.min.css' %}">
{% endblock %}
{% block js %}
    <script src="{% static 'plugins/datatable/js/jquery.dataTables.js' %}"></script>
    <script src="{% static 'plugins/datatable/js/dataTables.bootstrap.min.js' %}"></script>
    <script src="{% static 'js/jquery.form.js' %}"></script>
    <script >
        $(function () {
            // datatable js 配置
            var dom = '<"col-xs-6 left-col-side"<"toolbar">><"col-xs-6 right-col-side"f>t<"col-xs-6 left-col-side"l><"col-xs-6 right-col-side"p>r';
            var tb_parking = $('#tb_prc').DataTable({
                "dom": dom,
                "autoWidth": true,
                "searching": true,
                "columnDefs": [
                    { "render": function(data, type, row) {
                        console.log(row)
                        var btnstr = "<a href='javascript:void(0);' class='btn btn-default btn-sm prc-edit' " +
                            "data-parking='"+row[1]+"' data-prc='"+row[4]+ "' "
                                +"data-toggle='tooltip' data-placement='top' title='编辑'"
                                +"><i class='fa fa-edit' title='编辑' ></i></a> "
                                +"<a href='javascript:void(0);' class='btn btn-default btn-sm prc-remove'" +
                            " data-parking='"+row[1]+"' data-prc='"+row[4]+ "' "
                                +"data-toggle='tooltip' data-placement='top' title='删除'"
                                +"><i class='fa fa-trash-o' title='删除' ></i></a> "
                        return btnstr
                        },
                    "targets": 8,
                    "className": "align-center"
                    }
                  ],
            });
            var toolstr = "<button type='button' class='btn btn-primary btn-sm prc-add'><i class='fa fa-plus'></i> 新增设备</button>"
            $("div.toolbar").html(toolstr);
            // datatable js end


            // 按钮事件绑定
            $('.prc-edit').on('click', function () {
                var prc_num = $(this).data('prc');
                var parking_num = $(this).data('parking');
                window.location.href = "?prc_num="+prc_num+"&parent_num="+parking_num;
            })
            $('.prc-remove').on('click', function () {
                var prc_num = $(this).data('prc');
                var parking_num = $(this).data('parking');
                layer.confirm('您确认要删除此设备吗？',{icon:3}, function () {
                    $.post("{% url 'prc_remove' %}", {'prc_num': prc_num, 'parking_num':parking_num}, function(ret){
                    if(ret.status==1){
                        layer.msg('删除成功！');
                        window.location.reload();
                    }else{
                        layer.alert(ret.msg, {icon:2})
                    }
                },'json');
                })
            });
            $('.prc-add').on('click', function () {
                window.location.href = window.location.pathname;
            });
            $('#published').on('click', function () {
                $("#prcform").ajaxForm(function (responseResult) {
                    ret = JSON.parse(responseResult)
                    if (ret.status == 1) {
                        layer.msg('保存成功!');
                        window.location.reload();
                    } else {
                        console.log(ret.message)
                        layer.msg(ret.message);
                    }
                });
            });
        })
    </script>
{% endblock %}
{% block content %}
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        PRC管理
      </h1>
      <ol class="breadcrumb">
        <li><i class="fa fa-dashboard"></i> PRC管理</li>
        <li class="active">PRC列表</li>
      </ol>
    </section>
    <!-- Main content -->
    <section class="content">
        <div class="box box-primary">
          <div class="box-header with-border">
            <h3 class="box-title">{{ action|default:'新增' }}prc</h3>
            <div class="box-tools pull-right">
                <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            </div><!-- /.box-tools -->
          </div><!-- /.box-header -->
          <div class="box-body">
              {% if prc_form.errors  %}
                  <div class="alert alert-danger">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                    <h4><i class="icon fa fa-ban"></i> 错误</h4>
                    {% for error in prc_form.errors.values %}
                      {{ error }}
                    {% endfor %}
                  </div>
              {% endif %}
               <form id="prcform" action="{% url 'prc_form' %}" method="POST" class="form-horizontal" >
                   <input type="hidden" name="prc_num" value="{{ prc_num }}" />
                   <input type="hidden" name="parent_num" value="{{ parent_num }}" />
                   <input type="hidden" name="args" value="{{ args }}" />
                   {% csrf_token %}
                    <div class="form-group">
                        <label for="subtext" class="col-sm-2 control-label">设备IP</label>
                        <div class="col-sm-2 ">
                        {{ prc_form.PRC_IP }}
                        </div>
                        <label for="subtext" class="col-sm-1 control-label">设备ID</label>
                        <div class="col-sm-3">
                        {{ prc_form.PRC_ID }}
                        </div>
                        <label for="subtext" class="col-sm-1 control-label">型号</label>
                        <div class="col-sm-3">
                        {{ prc_form.PRC_model }}
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="subtext" class="col-sm-2 control-label">厂家</label>
                        <div class="col-sm-2">
                        {{ prc_form.manufacturer }}
                        </div>
                        <label for="subtext" class="col-sm-1 control-label">安装位置</label>
                        <div class="col-sm-3">
                        {{ prc_form.install_position }}
                        </div>
                        <label for="subtext" class="col-sm-1 control-label">车场</label>
                        <div class="col-sm-3">
                        {{ prc_form.parkinglot }}
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-5 col-md-9 ">
                            <button type="submit" id="published" class="btn btn-primary"><i class="fa fa-save"></i> 保存</button>
                            <button type="reset" class="btn btn-primary "><i class="fa fa-undo"></i> 重置 </button>
                        </div>
                    </div>
               </form>
          </div>
        </div>


        <div class="box box-primary">
          <div class="box-header with-border">
            <h3 class="box-title">PRC列表</h3>
            <div class="box-tools pull-right">
                <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            </div><!-- /.box-tools -->
          </div><!-- /.box-header -->
          <div class="box-body">
             <table id="tb_prc" class="table table-hover table-bordered">
                <thead>
                   <th>序号</th>
                   <th>车场编号</th>
                   <th>车场名称</th>
                   <th>设备IP地址</th>
                   <th>设备ID</th>
                   <th>设备型号</th>
                   <th>生产厂家</th>
                   <th>安装位置</th>
                   <th>操作</th>
                </thead>
                <tbody>
                    {% for prc in prc_list %}
                    <tr>
                        <td>{{ forloop.counter }}</td>
                        <td>{{ prc.parkinglot.parking_num }}</td>
                        <td>{{ prc.parkinglot.name }}</td>
                        <td>{{ prc.PRC_IP }}</td>
                        <td>{{ prc.PRC_ID }}</td>
                        <td>{{ prc.PRC_model }}</td>
                        <td>{{ prc.manufacturer }}</td>
                        <td>{{ prc.install_position }}</td>
                        <td></td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
          </div><!-- /.box-body -->
        </div><!-- /.box -->
    </section>
    <!-- /.content -->
  </div>

{% endblock %}